<template>
  <div>
    <div class="py-3" style="background: #fafbfb"></div>
    <div style="padding: 34px 0 10px 38px; display: inline-block">
      <div class="row">
        <label class="lable1">旧密码：</label>
        <el-input
          v-model="param.oldPwd"
          style="width: 240px"
          placeholder="请输入"
          type="password"
          show-password
        />
      </div>
      <div class="row relative">
        <label class="lable1">新密码：</label>
        <el-input
          v-model="param.newPwd"
          style="width: 240px"
          placeholder="请输入"
          type="password"
          show-password
        />
        <span
            v-if="pwdTip1"
            class="absolute top-full text-gray-400 text-xs text-red-500"
            style="left: 99px;"
            >{{pwdTip1}}</span
          >
      </div>
      <div class="row relative">
        <label class="lable1">确认新密码：</label>
        <el-input
          v-model="param.confirmPwd"
          style="width: 240px"
          placeholder="请输入"
          type="password"
          show-password
        />
        <span
            v-if="pwdTip2"
            class="absolute top-full text-gray-400 text-xs text-red-500"
            style="left: 99px;"
            >{{pwdTip2}}</span
          >
      </div>
      <div class="row">
        <label class="lable1">验证码：</label>
        <div class="" style="display: inline">
          <el-input
            v-model="param.captcha"
            style="width: 120px"
            placeholder="验证码"
          />
          <img
            @click="getCaptcha"
            :src="captchaImg"
            alt=""
            style="
              width: 100px;
              height: 35px;
              display: inline;
              margin-left: 20px;
              border: 1px solid #dcdfe6;
            "
          />
        </div>
      </div>
      <div class="flex justify-center">
        <el-button
          :class="[
            'mt-12',
            'mb-3',
            'w-48',
            'h-10',
            buttonDisabled ? 'disabled-save-btn' : 'save-btn',
          ]"
          :type="buttonDisabled ? 'info' : 'primary'"
          @click="buttonDisabled ? null : save()"
          round
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { captcha, changePwd } from "@/api/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const value1 = ref("");
const param = ref({ oldPwd: "", newPwd: "", confirmPwd: "", captcha: "" });
const oldPwd = ref("");
const captchaImg = ref("");

const pwdTip1 = computed(() => {
  if (
    (param.value.newPwd.length < 6 && param.value.newPwd.length != 0) ||
    param.value.newPwd.length > 16
  ) {
    return "请输入6~16位的密码";
  }
  return false;
});

const pwdTip2 = computed(() => {
  if (
    (param.value.confirmPwd.length < 6 && param.value.confirmPwd.length != 0) ||
    param.value.confirmPwd.length > 16
  ) {
    return "请输入6~16位的密码";
  }
  return false;
});

// 按钮禁用状态 判断那些输入框是否为空，为空返回true
const buttonDisabled = computed(() => {
  return (
    !param.value.oldPwd.trim() ||
    !param.value.newPwd.trim() ||
    !param.value.confirmPwd.trim() ||
    !param.value.captcha.trim()
  );
});

const getCaptcha = () => {
  captcha().then((res) => {
    // 将ArrayBuffer转换为Blob对象
    const blob = new Blob([res], { type: "image/jpeg" });
    // 将Blob转换为base64编码的URL
    const reader = new FileReader();
    reader.onloadend = () => {
      captchaImg.value = reader.result;
    };
    reader.readAsDataURL(blob);
  });
};

const save = () => {
  console.log(param.value);
  changePwd(param.value).then((res) => {
    switch (res.code) {
      case 200:
        ElMessage.success("修改成功，请重新登录");
        param.value.oldPwd = "";
        param.value.newPwd = "";
        param.value.confirmPwd = "";
        param.value.captcha = "";
        getCaptcha();
        localStorage.removeItem("token");
        router.replace("/login");
        break;
      case 401:
        getCaptcha();
        ElMessage.error("验证码错误");
        break;
    }
  });
};

onMounted(() => {
  getCaptcha();
});
</script>
<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.row {
  font-size: 14px;
  line-height: 30px;
  margin-bottom: 20px;
}

.row label {
  color: #b7bbbf;
  display: inline-block;
  vertical-align: middle;
}

.row .el-input {
  margin-left: 15px;
  vertical-align: middle;
}

.row .lable1 {
  width: 84px;
}
.save-btn:hover {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
.disabled-save-btn:hover {
  background-color: #909399;
  border-color: #909399;
  color: #fff;
}
</style>
